import React, { useState, useEffect } from 'react'
import { Outlet, useNavigate } from 'react-router-dom'
import axios from './axios'

import './MyAllOrderGoods.css'
import { ArrowLeft } from '@nutui/icons-react'
import {  Sticky } from '@nutui/nutui-react'
import { LeftOutlined } from '@ant-design/icons';
import { Button, Space } from 'antd-mobile'


export default function MyAllOrderGoods() {
  const navigate = useNavigate()

  //用户id
  const [userid, setUserId] = useState('6693b3e1b44ec7f24ef6cf30')
  //请求状态
  const requeststatus = 0

  const [orderls, setOrderls] = useState([])
  const [numss, setNumss] = useState(-1)

  //全部子组件
  const allOrder = ['全部', '待付款', '待发货', '待收货', '已完成']

  //吸顶
  const handleChange = (val) => {
    console.log('吸顶状态发生了改变,当前fixed为', val)
  }

  //切换
  // const [active, setActive] = useState(0)
  const qiehuan=(item)=>{
    console.log(item);
    if (item=='全部'){
      navigate('/ToAllOrderGoods/ToAllOrder')

    }else if (item=='待付款'){
      navigate('/ToAllOrderGoods/ToBePaid')
    }else if (item=='待发货'){
      navigate('/ToAllOrderGoods/ToBeShipped')
    }else if (item=='待收货'){
      navigate('/ToAllOrderGoods/ToBeReceived')
      
    }else if (item=='已完成'){
      navigate('/ToAllOrderGoods/MyCompleted')
    }

  }

  //请求订单数据
  const getall=async()=>{
    let {data} = await axios.get(`get_allcart?id=${userid}&requeststatus=${requeststatus}`)

    setOrderls(data.data)
    console.log(data.data);
  }

  useEffect(()=>{
      // getall()
    setNumss(0)
  },[])
  return (
    <div className='my_all_order'>
      <span></span>
      <Sticky threshold={numss} onChange={(val) => handleChange(val)}>
      <div className='my_all_order_top'>
        <div className='my_all_order_top_top'>
          <LeftOutlined style={{ fontSize: '18px' }} onClick={() => { navigate('/My') }} />
          <h2>全部订单</h2>
          <span></span>
        </div>
        <div className='my_all_order_top_bottom'>
          {allOrder.map((item, index) => {
            return <span key={index} className='order_qiehuan' onClick={()=>{qiehuan(item)}}>
              {item}
            </span>
          })}
        </div>
      </div>
      </Sticky>
      
      <div className='my_all_order_center'>
        <div className='my_all_order_center_one'>
          {/* <div style={{display:active==0?'':'none'}}>
            {orderls.map((item,index)=>{
              return <div key={item._id} className='my_all_order_center_xuanran'>
                <div className='my_all_order_center_xuanran_left'>
                  <img src={`/img/${item.imgsrc}`} alt="" style={{ width: '100px',height:'100px' }} />
                </div>
                <div className='my_all_order_center_xuanran_right'>
                  <h3>{item.name}</h3>
                  <div className='my_all_xuanran_p'>
                  <p className='my_all_xuanran_p1'>共一件</p>
                  <p>￥{item.price}</p>
                  
                  </div>
                  <p className='my_all_xuanran_caozuo_zhifu' 
                  style={{display:item.flag==1?'':'none',color:'red'}}>·待付款·</p>
                  <p className='my_all_xuanran_caozuo_zhifu' 
                  style={{display:item.flag==2?'':'none',color:'red'}}>·待发货·</p>
                  <p className='my_all_xuanran_caozuo_zhifu' 
                  style={{display:item.flag==3?'':'none',color:'red'}}>·请确认收货·</p>
                  <p className='my_all_xuanran_caozuo_zhifu' 
                  style={{display:item.flag==4?'':'none',color:'#919191'}}>已完成</p>
                  
                  <div className='caozuo'>
                  <button style={{display:item.flag==1?'':'none'}}>取消订单</button>

                  <button style={{display:item.flag==1?'':'none',color:'white',backgroundColor:'red',border:'none'}}>去支付</button>
                  
                  <button style={{display:item.flag==2?'':'none'}}>等待发货</button>
                  <button style={{display:item.flag==3?'':'none'}}>确认收货</button>
                  <button style={{display:item.flag==4?'':'none'}}>删除订单</button>
                  <p></p>
                </div>
                </div>
                
              </div>
            })}
          </div> */}
          
        </div>
        <Outlet></Outlet>
      </div>






    </div>
  )
}